<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>现场回报</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../css/wx/mui.min.css">
    <link rel="stylesheet" href="../../../css/wx/app.css">
    <link rel="stylesheet" href="../../../css/wx/icons-extra.css"/>
    <link rel="stylesheet" href="../../../css/wx/style.css"/>
    <link rel="stylesheet" href="../../../css/wx/wx-iconfont.css"/>
    <script type="text/javascript">
        var pageConfig = {
            jss: ["app/wdbg/scene"],
            cb: function (o) {
                app.pageModule('scene', o);
            }
        };
    </script>
    <script data-main="../../../js/wx/public/config" src="../../../js/require.js"></script>

    <style>

        .signature-pad--body {
            position: relative;
            -webkit-box-flex: 1;
            width: 100%;
            height: 180px;
            flex: 1;
            border: 1px solid #f4f4f4;
        }

        .signature-pad--body canvas {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
        }

        .mui-input-row.mui-checkbox.mui-left:after {
            height: 0;
        }

        .potoImg {
            overflow: auto;
        }

        .potoImg ul li {
            float: left;
            margin-left: 6px;
            margin-bottom: 6px;
        }

        .mui-scroll ul {
            margin-left: -6px;
        }

        .writen {
            position: absolute;
            z-index: 999;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 86%;
            height: 50%;
            margin: auto;
        }

        .writen > .mui-row {
            text-align: center;
            margin-top: 10px;
        }

        .writen > .mui-row button {
            color: #fff;
        }

        .writen > .mui-row button:first-child {
            background-color: #FFB400;
            border-color: #FFB400;
        }

        .cousterWi p {
            flex: 1;
        }

        .cousterWi span {
            font-size: 24px;
            color: #FF7100;
        }

        .tab2 .mui-table-view-cell span.puliColor_font {
            color: #FF7100;
        }

        .mui-scroll-wrapper {
            bottom: 58px;
        }

        .mui-input-group .mui-input-row.flex-scene label {
            padding: 0;
        }

        .mui-input-group .mui-input-row.mui-checkbox label {
            padding: 11px 0;
        }

        .mui-checkbox input[type=checkbox] {
            right: 0;
            top: 6px;
        }

        .mui-input-group .mui-input-row {
            height: inherit;
        }

        .padTop {
            padding: 6px 0;
        }

        select {
            font-size: 14px;
        }

        .flex-scene {
            display: flex;
        }

        textarea {
            height: 1.6rem;
            resize: none;
            -webkit-tap-highlight-color: red;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }

        .mui-scroll {
            z-index: 10;
        }

    </style>
</head>

<body>
<div id="scene1" class="mui-content">
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <div>
                <!--class="mui-card reserved"-->
                <div class="mui-card">
                    <div class="mui-card-header">
                        <p><i class="iconfont icon icon-02 secondColor_font" style="margin-right: 5px;"></i>
                            <label>{{des.MMRFDOCNO}}</label>
                        </p>
                        <label class="secondColor_font">{{des.MMRFDOCDATE}}</label>
                    </div>
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                            <div class="mui-row">
                                <div class="mui-col-xs-12">
                                    <p><span>客户名称：</span>{{des.GWAKL004}}</p>
                                </div>
                                <div class="mui-col-xs-12">
                                    <p><span>联系人：</span>{{des.MMRD010}} {{des.MMRD011}}</p>
                                </div>
                                <div class="mui-col-xs-12 flex-scene">
                                    <p style="flex: 0 0 20%;"><span>客户地址：</span></p>
                                    <p style="flex: 0 0 75%;">{{des.GWAK028}}</p>
                                    <div class="addressIcon">
                                        <a href="javascript:;" class="secondColor_font"><i
                                                class="iconfont icon icon-03"></i></a>
                                    </div>
                                </div>
                                <div class="mui-col-xs-12">
                                    <p><span>提报时间：</span>{{des.MMRDDOCDATE}}</p>
                                </div>
                                <div class="mui-col-xs-12">
                                    <p><span>受理时间：</span>{{des.MMRD022}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mui-card-footer">
                        <label class="danger_font">{{des.MMRD019|MMRD019STATUS}}</label>
                    </div>
                </div>

                <div class="tab2 scene">
                    <div class="mui-card">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell"><span>设备：</span>{{des.MMRF003}}/{{des.GWAML003}}</li>
                            <li class="mui-table-view-cell"><span>序号：</span>{{des.MMRF004}}</li>
                            <li class="mui-table-view-cell"><span>故障：</span>{{des.MMRLL003}}</li>
                            <li class="mui-table-view-cell"><span>问题描述：</span>
                                <textarea class="riWid"
                                          v-model="des.MMRG010"
                                          placeholder="请输入问题描述"></textarea>
                            </li>
                            <span>问题照片：</span>
                            <li class="mui-table-view-cell flex-scene">
                                <div class="wf-imageUpdate">
                                    <div class="tackPoto">
                                        <div class="div-autoline-boxDiv">
                                            <template v-for="(img,inx) in imgs">
                                                <div class="div-autoline-parent">
                                                    <div class="child">
                                                        <i @tap.stop="delimg(inx)"
                                                           class="mui-icon mui-icon-closeempty posIcon"></i>
                                                        <img :src="img.img">
                                                    </div>
                                                </div>
                                            </template>
                                            <div v-show="imgs.length<9" @tap.stop="addImgs" class="div-autoline-parent">
                                                <div class="child start"><i class="icon iconfont icon-05"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell"><span>计划到达时间： </span>{{des.MMRF009}}</li>
                            <li class="mui-table-view-cell flex-scene">
                                <label>签到地点：</label>
                                <input v-model="des.MMRG008" type="text" disabled="disabled"/>
                            </li>
                            <li class="mui-table-view-cell flex-scene">
                                <label>签到时间：</label>
                                <input v-model="des.MMRG007" type="datetime" disabled="disabled"/>
                            </li>
                            <!--<li class="mui-table-view-cell flex-scene">-->
                            <!--<label>结束时间：</label>-->
                            <!--<input type="datetime"/>-->
                            <!--</li>-->
                        </ul>
                    </div>
                </div>

                <div class="sceneCont" style="display: none">
                    <div class="tab2 scene scene2">
                        <div class="mui-card" style="margin-bottom: 10px;">
                            <ul class="mui-table-view">
                                <!--服务报告-->
                                <li class="mui-table-view-cell serve">
                                    <div class="flex-scene">
                                        <label>问题处理方案：</label>
                                        <!--<p>-->
                                        <!--<a href="#" class="puliColor_font"><i class="iconfont icon icon-08"></i>添加</a>-->
                                        <!--<a href="#" class="danger_font"><i class="iconfont icon icon-15"></i>删除</a>-->
                                        <!--</p>-->
                                    </div>
                                    <textarea v-model="des.MMRG102"></textarea>
                                </li>
                                <li class="mui-table-view-cell flex-scene serve">
                                    <label>处理结果：</label>
                                    <select v-model="des.MMRG100">
                                        <option value="1">处理完成</option>
                                        <option value="2">暂缓处理</option>
                                        <option value="3">未解决问题</option>
                                    </select>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab2 scene scene2">
                        <div class="mui-card" style="margin-bottom: 10px;">
                            <ul class="mui-table-view">
                                <!--服务报告-->
                                <div class="countOrder countOrder_checkbox">
                                    <!--<li class="flex-scene">-->
                                    <!--<p>在保状态：</p><span>保内</span>-->
                                    <!--</li>-->
                                    <div>
                                        <form class="mui-input-group">
                                            <div class="mui-input-row mui-left flex-scene">
                                                <label style="padding-left: 0;flex: 1;">
                                                    配件(<span class="puliColor_font">¥{{des.pjsum|priceFMT}}</span>)
                                                </label>
                                                <p style="flex: inherit;line-height: 36px;">
                                                    <a @tap.stop="addBj" href="javascript:;" class="puliColor_font"><i
                                                            class="iconfont icon icon-08"></i>添加</a>
                                                </p>
                                            </div>
                                            <!--配件-->
                                            <template v-for="(item, inx) in des.pjlist">
                                                <div class="tipContent">
                                                    <div class="items">
                                                        <a @tap.stop="delBj(inx)" href="javascript:;"
                                                           class="posIcon"><span
                                                                class="mui-icon mui-icon-trash"></span></a>
                                                        <h2>{{item.GWAML003}}</h2>
                                                        <div class="item">
                                                            <p>单价：{{item.MMRS009+'/'}}{{item.MMRS006|goodsUnits}}
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                x{{item.MMRH004}}
                                                            </p>
                                                        </div>
                                                        <div class="item mui-checkbox">
                                                            <p>收费：</p>
                                                            <input v-model="item.MMRH002" :true-value="'1'"
                                                                   :false-value="'0'" type="checkbox">
                                                        </div>
                                                        <div class="item mui-checkbox">
                                                            <p>回收：</p>
                                                            <input v-model="item.MMRS010" :true-value="'1'"
                                                                   :false-value="'0'" type="checkbox">
                                                        </div>
                                                        <div class="item flex-scene">
                                                            <p>处理方式：</p>
                                                            <select v-bind="item.MMRH001" style="padding: 5px 10px;">
                                                                <option value="1">增加配件</option>
                                                                <option value="2">更换配件</option>
                                                                <option value="3">其它</option>
                                                            </select>
                                                        </div>
                                                        <div class="item flex-scene">
                                                            <p>备注：</p>
                                                            <textarea v-bind="item.MMRH009"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                            <div class="mui-input-row mui-left flex-scene">
                                                <label style="padding-left: 0;flex: 1;">服务费(<span
                                                        class="puliColor_font">¥{{des.expsum|priceFMT}}</span>)</label>
                                                <p style="flex: inherit;line-height: 36px;">
                                                    <a @tap.stop="addExpenses" href="javascript:;"
                                                       class="puliColor_font"><i
                                                            class="iconfont icon icon-08"></i>添加</a>
                                                </p>
                                            </div>
                                            <!--费用-->
                                            <template v-for="(item, inx) in des.expensesList">
                                                <div class="mui-input-row mui-checkbox mui-left flex-scene padTop">
                                                    <select @change="expensesChange(item)" v-model="item.MMRI001"
                                                            style="padding: 5px 10px;width: 45%;font-size: 13px;margin: 0;border: 1px solid #dadada !important;">
                                                        <option v-for="v in expenses" :value="v.MMRC001">{{v.MMRCL003}}
                                                        </option>
                                                    </select>
                                                    <span style="margin: 0 5px;color: red;">¥{{item.MMRI002}}</span>
                                                    <input v-model="item.MMRI003"
                                                           style="width: 28%;position: inherit;top: 0;margin: 0 5px;border: 1px solid #dadada;text-align: center;height: 37px;"
                                                           v-number-only>
                                                    <p @tap.stop="delExpenses(inx)" class="mui-icon mui-icon-minus"
                                                       style="line-height: 36px;text-align: center;color: red;"></p>
                                                </div>
                                            </template>
                                        </form>
                                    </div>
                                    <div class="flex-scene" style="height: 34px;line-height: 34px;">
                                        <p>应收金额：</p><span style="color: #FF7100;">¥{{des.statsMoney|priceFMT}}</span>
                                    </div>
                                    <div class="flex-scene">
                                        <p>实收金额：</p>
                                        <span style="color: #FF7100;">¥{{des.statsMoney|priceFMT}}</span>
                                    </div>
                                    <div class="mui-table-view-cel">
                                        <div class="flex-scene">
                                            <label style="padding-left: 0;margin-bottom: 5px;">备注：</label>
                                        </div>
                                        <textarea v-model="des.MMRG013"></textarea>
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>

                    <div class="tab2 scene scene2">
                        <div class="mui-card" style="margin-bottom: 60px;">
                            <ul class="mui-table-view">
                                <li class="mui-table-view-cell serve">
                                    <div class="flex-scene">
                                        <label>客户意见：</label>
                                    </div>
                                    <textarea @focus.stop="" v-model="des.MMRG011"></textarea>
                                </li>
                                <li @tap="showSignature" class="mui-table-view-cell serve">
                                    <div class="flex-scene">
                                        <label>客户签字：</label>
                                        <span class="iconfont icon icon-16"
                                              style="font-size: 24px;color: #ff7100;line-height: 32px;"></span>
                                    </div>
                                    <div class="witer" style="height: 180px;background: #f1f1f1;">
                                        <img v-show="des.signature" id="signatureImg" :src="des.signature"
                                             style="width: 100%;height: 180px;">
                                        <!--<span class="iconfont icon icon-21"></span>-->
                                    </div>
                                </li>
                                <li class="mui-table-view-cell serveBtn text-center">
                                    <button @tap.stop="orderSumit" type="button" class="serveBtn01">提交上传</button>
                                    <!--<button type="button" class="serveBtn02">暂缓</button>-->
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


</div>
<div class="footBtn flex-scene">
    <button type="button" class="puliColor_bg" id="btnSignIn">现场签到</button>
    <button type="button" class="secondColor_bg" id="btn2">服务报告</button>
</div>

<!--现场签到-弹出层-->
<div class="returnCont modal1" style="display: none;">
    <div class="main">您确定到达现场？</div>
    <div class="foot">
        <a id="btnSignIn_sure" href="javascript:;" class="puliColor_font conBtn">确定</a>
        <a id="btnSignIn_cancel" href="javascript:;">取消</a>
    </div>
</div>
<!--签到成功-弹出层-->
<div class="returnCont modal2" style="display: none;">
    <div class="header puliColor_font">
        <span class="iconfont icon icon-06 puliColor_font"></span> 签到成功
    </div>
    <div class="main">地址：<span id="nAddress"></span></div>
    <div class="foot">
        <a id="btnSignIn_succ" class="puliColor_font conBtn2">确定</a>
    </div>
</div>

<div id="backdrop" class="mui-backdrop" style="display: none;">
    <div class="writen">
        <div id="signature-pad--body" class="signature-pad--body">
            <canvas></canvas>
        </div>
        <div class="mui-row">
            <button id="clearSignature" type="button" class="mui-btn mui-btn-primary mui-btn-outlined"
                    style="letter-spacing: 6px;">清空
            </button>
            <button id="signature" type="button" class="mui-btn mui-btn-warning mui-btn-outlined puliColor_bg"
                    style="letter-spacing: 6px;">确认
            </button>
        </div>
    </div>
</div>

</body>

</html>